
<template>
    <div class="app-container">
        <el-table 
         v-loading="listLoading"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        size="mini"
        >
         <el-table-column prop="name" width="200" label="模块名称"></el-table-column>
         <el-table-column prop="intro" label="模块介绍"></el-table-column>
         <el-table-column  label="操作" align="center" width="350">
            <template slot-scope="scope">
                <el-button type="info"  disabled  v-if="module_installed.includes(scope.row.module)" size="mini" >已安装</el-button>
                 <el-button type="primary"   v-else size="mini" @click="handleInstall(scope.row)">安装</el-button>
            </template>
         </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import Pagination from '@/components/Pagination' // 分页组件
    import {list,install} from '@/api/plugin' // 接口地址
export default {
    name: 'plugin_index',
    data() {
        return {
            list: [],
            module_installed:[],
            listLoading: false,
            total: 0,
            listQuery: { //列表查询参数
                page: 1,
                limit: 10
            },
        }
    },
    methods: {
        checkPermission, // 权限判断函数
        getList() {
            this.listLoading = true
            list(this.listQuery).then(response => {
                this.list = response.data.list
                this.module_installed = response.data.module_installed
                this.listLoading = false
            })
        },
        handleInstall(row){
            let module = row.module;
            // this.listLoading = true;
            install(module).then(response => {
                this.$message({
                    message: '安装成功',
                    type: 'success'
                })
                this.getList()
            })
        }
    },
    mounted() {
        this.getList()
    },
}
</script>
